<template>
  <div class="clue-container">
    <div class="list-wrap">
      <!--客户tab按钮筛选-->
      <ul class="tab-wrap-customer">
        <li class="tab-item-customer" @click="tabChange(0)" :class="{current: tabIndex===0}">全部客户</li>
        <li class="tab-item-customer" @click="tabChange(1)" :class="{current: tabIndex===1}">意向客户</li>
        <li class="tab-item-customer" @click="tabChange(2)" :class="{current: tabIndex===2}">已成客户</li>
      </ul>
      <!--客户列表-->
      <ul class="customer-list" v-if="customerList.length > 0"
          v-infinite-scroll="loadMoreCustomer" :infinite-scroll-disabled="loading" infinite-scroll-distance="1">
        <li class="business-item" v-for="customer in customerList" :key="customer.pid" @click="customerToDetail(customer.pid)">
          <div>{{customer.name}}</div>
          <div>
            <span>行业:</span>
            <span>{{customer.oneIndustry}}</span>-<span>{{customer.twoIndustry}}</span>
            -<span>{{customer.threeIndustry}}</span>-<span>{{customer.fourIndustry}}</span>
          </div>
          <div>
            <span>地区:</span><span>{{customer.province}}-{{customer.city}}</span>
          </div>
        </li>
      </ul>
      <div v-if="customerList.length === 0" class="no-data">暂无数据</div>
      <div v-if="customerList.length > 0 && isLoaded" class="no-data">已全部加载完成</div>
    </div>
  </div>
</template>

<script>
import {GetCustomerList} from '@/services/customer.service'

export default {
  name: 'BusinessIndex',
  data () {
    return {
      // tab页签的切换
      tabIndex: 0,
      // 客户列表list
      loading: false,
      isLoaded: false,
      type: '',
      customerList: [],
      limit: 6,
      offset: 0
    }
  },
  computed: {
    customerParams () {
      let params = {
        dealType: 1,
        dealUserIds: [window.getLocalStorage('userId')]
      }
      if (this.type !== '') {
        params.type = this.type
      }
      return params
    }
  },
  watch: {
    customerParams () {
      this.getAllCustomer()
    }
  },
  created () {
    this.getAllCustomer()
  },
  methods: {
    // tab点击事件
    tabChange (index) {
      this.offset = 0
      if (index === 0) {
        this.tabIndex = index
        this.type = ''
      }
      if (index === 1) {
        this.tabIndex = index
        this.type = 0
      }
      if (index === 2) {
        this.tabIndex = index
        this.type = 1
      }
    },
    // 客户列表list
    getAllCustomer () {
      this.loading = true
      GetCustomerList(this.limit, this.offset, this.customerParams).then((res) => {
        if (res.datas.length === 0) {
          this.customerList = []
        } else {
          this.customerList = this.customerList.concat(res.datas)
          this.offset = this.limit + this.offset
          res.datas.length < this.limit ? this.isLoaded = true : this.isLoaded = false
        }
        this.loading = false
      })
    },
    loadMoreCustomer () {
      this.getAllCustomer()
    },
    customerToDetail (id) {
      this.$router.push(`/customerDetail/${id}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .list-wrap
    padding 0 15px
  /*商机列表*/
  .business-item
    position: relative
    margin-top 10px
    margin-bottom 10px
    padding 10px
    background #fff
    border-radius 4px
    overflow hidden
  .business-item>div:first-child
    font-size: 16px !important
    line-height: 22px
    margin-bottom: 5px
  .business-item>div:not(:first-child)
    color: #999
    font-size: 12px !important
    line-height: 18px
  .business-item>div i
    float: right
    font-size: 12px
</style>
